<template>
  <div class="count-down">
    <count-down-item :numberStr="hours" :fontSize="fontSize"></count-down-item>
    <span class="icon comma">
      <i class="iconfont icondigital_1" :style="'fontSize:' + fontSize + 'px'"></i>
    </span>
    <count-down-item :numberStr="minutes" :fontSize="fontSize"></count-down-item>
    <span class="icon comma">
      <i class="iconfont icondigital_1" :style="'fontSize:' + fontSize + 'px'"></i>
    </span>
    <count-down-item :numberStr="seconds" :fontSize="fontSize"></count-down-item>
    <!-- <div class="times iconfont">
      {{drawTime}}
    </div> -->
    <!-- <div class="hours item">
      <div class="high number">
        <i class="iconfont icondigital_10 bg"></i>
        <i class="iconfont icondigital_6 active"></i>
      </div>
      <div class="low number">
        <i class="iconfont icondigital_10 bg"></i>
        <i class="iconfont icondigital_6 active"></i>
      </div>
    </div>
    <div class="comma item">
      <div class="number">
        <i class="iconfont icondigital_1 bg"></i>
        <i class="iconfont icondigital_1 active"></i>
      </div>
    </div>
    <div class="minutes item">
      <div class="high number">
        <i class="iconfont icondigital_10 bg"></i>
        <i class="iconfont icondigital_6 active"></i>
      </div>
      <div class="low number">
        <i class="iconfont icondigital_10 bg"></i>
        <i class="iconfont icondigital_6 active"></i>
      </div>
    </div>
    <div class="comma item">
      <div class="number">
        <i class="iconfont icondigital_1 bg"></i>
        <i class="iconfont icondigital_1 active"></i>
      </div>
    </div>
    <div class="seconds item">
      <div class="high number">
        <i class="iconfont icondigital_10 bg"></i>
        <i class="iconfont icondigital_6 active"></i>
      </div>
      <div class="low number">
        <i class="iconfont icondigital_10 bg"></i>
        <i class="iconfont icondigital_6 active"></i>
      </div>
    </div> -->
  </div> 
</template>

<script>
import CountDownItem from './components/count-down-item'
import { formatCountDown } from '@/assets/js/util'
export default {
  components: {
    CountDownItem
  },
  props: {
    timeStamp: {
      type: Number,
      default: 0
    },
    fontSize: {
      type: Number,
      default: 24
    }
  },
  data() {
    return {
      drawTime: '00:00:00'
    }
  },
  created() {
    this.countDownDrawTime()
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
  methods: {
    countDownDrawTime() {
      this.drawTime = formatCountDown(this.timeStamp)
      if(this.drawTime == '00:00:00') {
        return 
      }
      this.timer = setTimeout(() => {
        this.countDownDrawTime()
      }, 500)
    }
  },
  computed: {
    hours() {
      return this.drawTime.split(':')[0]
    },
    minutes() {
      return this.drawTime.split(':')[1]
    },
    seconds() {
      return this.drawTime.split(':')[2]
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .count-down 
      display flex 
      align-items center 
      .comma
        margin-right -10px 
        margin-left -10px 
        .iconfont 
          font-size 24px 
          color $color-theme-red 
</style>